﻿var info = document.getElementById("info");
//获得被拖动的元素，这里为图片所在的div
var src = document.getElementById("album");
var dragImgId;
//开始拖动操作
src.ondragstart = function(e) {
    //获得被拖动的图片ID
    dragImgId = e.target.id;
    //获得被拖动元素
    var dragImg = document.getElementById(dragImgId);
    //拖动操作结束
    dragImg.ondragend = function(e) {
        //恢复提醒信息
        info.innerHTML = "<h3>温馨提示：可以将图片直接拖到目的地</h3>";
    };
    e.dataTransfer.setData("text", dragImgId);
};
//拖动过程中
src.ondrag = function(e) {
    info.innerHTML = "<h3>--图片正在被拖动--</h3>";
}
//获得拖动的目标元素
var target = document.getElementById("trash");
//关闭默认处理；
target.ondragenter = function(e) {
    e.preventDefault();
}
target.ondragover = function(e) {
    e.preventDefault();
}
//有图片拖动到了目标元素
target.ondrop = function(e) {
    var draggedID = e.dataTransfer.getData("text");
    //获取图片中的dom对象
    var oldElem = document.getElementById(draggedID);
    //从图片div中删除该图片的节点
    oldElem.parentNode.removeChild(oldElem);
    //将被拖动的图片dom节点添加到目的地div中；
    target.appendChild(oldElem);
    info.innerHTML = "<h3>温馨提示：可以将图片直接拖到目的地</h3>";
    e.preventDefault();
}